<template>
	<view class="content">
		<view class="hei20"></view>
		<view class="wid90 mar borRad20 bacFFF" style="padding: 20rpx 0;">
			<view v-if="list.pic" class="wid90 mar dis disAl">
				<view style="width: 30%;height: 160rpx;">
					<image :src="url+list.pic.split(',')[0]" class="hei100" style="width: 140rpx;"></image>
				</view>
				<view>
					<view class="foSi30 fowe600">{{list.name}}</view>
					<view class="foSi28" style="color: #686868;margin-top: 80rpx;">数量：1</view>
				</view>
			</view>
		</view>
		<view class="wid90 mar borRad20 bacFFF mar-top30">
			<view class="wid90 mar hei80 dis disAl disJuB foSi30 fowe600">
				<view>消耗积分</view>
				<view style="color: #FF0000;">{{list.price}}积分</view>
			</view>
		</view>
		<view class="wid90 mar mar-top30 bacFFF borRad20" style="padding: 20rpx 0;">
			<view class="wid90 mar foSi30">
				<view class="dis disAl disJuB hei60">
					<view class="fowe600">联系人</view>
					<input style="text-align: right;"
						v-model="nickname" placeholder="请输入联系人姓名" />
				</view>
				<view class="dis disAl disJuB hei60 mar-top20">
					<view class="fowe600">联系方式</view>
					<input style="text-align: right;"
						v-model="mobile" placeholder="请输入联系人手机号" />
				</view>
				<view class="dis disAl disJuB hei60 mar-top20">
					<view class="foSi30 fowe600">提货点</view>
					<picker class="foSi30" @change="tihuoChange" :value="tihuoIndex" :range-key="'name'" :range="tihuoList">
						<view class="dis disAl">
							<view v-if="tihuoIndex" class="mar-right10">{{tihuoList[tihuoIndex].name}}</view>
							<view v-if="!tihuoIndex" class="mar-right10" style="color: #737373;">请选择提货点</view>
							<uni-icons type="right" size="25rpx"></uni-icons>
						</view>
					</picker>
				</view>
			</view>
		</view>
		<view style="height: 120rpx;" :style="'padding-bottom: '+(bottomHight - 20)+'px;'"></view>
		<view class="wid100 bacFFF poFix" style="bottom: 0;">
			<view class="dis disAl" style="height: 120rpx;">
				<view class="hei80 wid90 mar borRad10 dis disAl disJuC foSi30 coFFF" 
					style="background-color: #035DFF;" @click="dingyue()">确认兑换</view>
			</view>
			<view v-if="bottomHight != 0" :style="'height: '+(bottomHight - 20)+'px;'"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.global.url,
				bottomHight: 0,
				id: 0,
				list: [],
				mobile: '',
				nickname: '',
				tihuoList: [],
				tihuoIndex: null,
			}
		},
		onLoad(option) {
			let app = uni.getSystemInfoSync();
			this.bottomHight = app.safeAreaInsets.bottom //屏幕底部安全距离
			this.id = option.id
			this.getList()
			this.getGasstationList()
		},
		methods: {
			tihuoChange: function(e) {
				this.tihuoIndex = e.detail.value
			},
			getGasstationList() {
				var that = this;
				uni.request({
					url: that.global.url + '/api/qianyu_petrol/gasstation_list_plus',
					method: "POST",
					header: {
						'site-id': that.global.site_id, //自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							that.tihuoList = result.data
						}
					}
				})
			},
			getList() {
				var that = this;
				uni.request({
					url: that.global.url + '/api/qianyu_petrol/gasstation_goods_info',
					method: "POST",
					header: {
						'site-id': that.global.site_id,//自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						id: that.id
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							that.list = result.data
						}
					}
				})
			},
			dingyue() {
				var that = this
				// 要检查的订阅id
				let id = uni.getStorageSync('tzId').integral_template
				let id1 = uni.getStorageSync('tzId').integral_variation_template
				// 这里是获取下发权限地方，根据官方文档，可以根据  wx.getSetting() 的 withSubscriptions   这个参数获取用户是否打开订阅消息总开关。后面我们需要获取用户是否同意总是同意消息推送。所以这里要给它设置为true 。
				wx.getSetting({
					withSubscriptions: true, //  这里设置为true,下面才会返回mainSwitch
					success: function(res) {
						// 调起授权界面弹窗
						// if (res.subscriptionsSetting.mainSwitch) { // 用户打开了订阅消息总开关
						// 	if (res.subscriptionsSetting.itemSettings !=
						// 		null) { // 用户同意总是保持是否推送消息的选择, 这里表示以后不会再拉起推送消息的授权
						// 		that.duihuan()
						// 	} else {
								// 当用户没有点击 ’总是保持以上选择，不再询问‘  按钮。那每次执到这都会拉起授权弹窗
								wx.showModal({
									title: '提示',
									content: '请授权开通服务通知',
									showCancel: true,
									success: function(ress) {
										if (ress.confirm) {
											wx.requestSubscribeMessage({ // 调起消息订阅界面
												// tmplIds: [id],
												tmplIds: [id,id1],
												success(res) {
													console.log('订阅消息 成功 ');
													console.log(res);
													that.duihuan()
												},
												fail(er) {
													console.log("订阅消息 失败 ");
													console.log(er);
													that.duihuan()
												}
											})
										}
									}
								})
							// }
						// } else {
						// 	console.log('订阅消息未开启')
						// 	that.duihuan()
						// }
					},
					fail: function(error) {
						console.log(error);
						that.duihuan()
					},
				})
			},
			duihuan(){
				var that = this;
				var userInfo = uni.getStorageSync('userInfo')
				if(!that.nickname){
					return uni.showToast({title: '请输入联系人姓名',icon: 'error',duration: 2000})
				}
				if(!/^1[3456789]\d{9}$/.test(that.mobile)){
					return uni.showToast({title: '请输入正确手机号',icon: 'error',duration: 2000})
				}
				if(!that.tihuoIndex){
					return uni.showToast({title: '请选择提货点',icon: 'error',duration: 2000})
				}
				uni.request({
					url: that.global.url + '/api/qianyu_petrol/gasstation_integralorder_pay',
					method: "POST",
					header: {
						'site-id': that.global.site_id,//自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						'id': that.id,
						'name': that.nickname,
						'mobile': that.mobile,
						'gas_station_id': that.tihuoList[that.tihuoIndex].id
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							uni.reLaunch({
								url: '/pages/store/exchange'
							})
						}else{
							uni.showToast({title: result.msg,icon: 'error',duration: 2000})
						}
					}
				})
			},
			tiaozhuan(url){
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	.content {
		background-color: #F8F9FD;
		height: 100vh;
	}
</style>
